<template>
	<view class="unni-select">
		<view class="list" @click="pop">
			<view class="item">
				{{selectText}}
			</view>
			<view class="item">
				<img src="./push_down.png" mode="" :class="['img',{active:ispop}]"></img>
			</view>
		</view>
		<view class="pop" v-show="ispop">
			<view class="item" v-for="item in data.detailList" @click="select(item)">
				{{item.title}}
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'unniSelect',
		data() {
			return {
				selectText:'',
				ispop:false
			};
		},
		props: {
			data:{
				type: Object,
			},
			default:{
				type: String,
				default: ''
			}
		},
		mounted() {
			if(this.data.title){
				this.selectText=this.data.title
			} else {
				this.selectText=this.default
			}
			
		},
		methods:{
			pop(){
				this.ispop=!this.ispop
			},
			select(item){
				this.ispop=!this.ispop
				this.selectText=item.title
				this.$emit("result",{'item':item,'single':item.value})
			}
		}
	}
</script>
<style lang="scss">
	.unni-select{
		position: relative;
		.list{
			border: 1rpx solid #cccccc;
			border-radius: 20rpx;
			display: flex;
			.item{
				padding: 25rpx;
				flex: 1;
				.active{
					transform: rotate(180deg);
				}
			}
			.item:first-child{
				flex: 6;
			}
		}
		.pop{
			position: absolute;
			z-index: 100;
			width: 100%;
			box-shadow: 10rpx 7rpx 30rpx -1rpx rgba(0,0,0,0.20);
			background-color: #ffffff;
			.item{
				padding: 25rpx;
			}
		}
		
	}
</style>
